<template>
	<view class="container">
		<view class="uni-tab-title">
			<view class="line-box">
				<view
					:class="[
						'line-item',
						item.code == curTab ? 'active' : '',
					]"
					v-for="(item, key) in tabList"
					:key="key"
					@click="onClickLine(item)">
					{{ item.name }}
				</view>
		</view>
		<view class="main-card">
		    <view class="main-card-title">{{ titleName.pjFen }}</view>
		    <view class="utilization-grid">
		        <view 
				v-for="(item, index) in statisticsList"
				:key = 'index'
				class="utilization-item">
		            <view class="utilization-label">{{ item.name }}</view>
		            <view class="utilization-value">{{ item.value }}
						<!-- <label class="utilization-unit">分</label> -->
					</view>
		        </view>
		    </view>
		</view>	
		<view class="chart-section">
		    <view class="chart-header">
		        <view class="chart-title-edit">{{ titleName.Tend }}</view>
		        <!-- <view class="chart-time-selector">
					<uni-datetime-picker v-model="rangPJTime" :end='endPJtime' type="daterange" :clear-icon="false" @change='rangpjChange'/>
		        </view> -->
		    </view>
			<!-- :canvas2d="true" -->
		    <view class="chart-container">
				<qiun-data-charts
					 :canvas-style="canvasStyle" 
				      type="line"
			          :canvas2d="true"
				      :opts="optsYq"
					  :reshow="isShow"
				      :chartData="yqData"
				    />
			</view>
		</view>
		<view class="time-selector">
		    <view class="time-selector-title"> {{ curTime }} 数据时间</view>
			<view
				v-if="timeList!=''" class="time-tabs" style="margin-top: 5px;">
				<view
					:class="[
						'time-tab',
						item.code == curData ? 'active' : '',
					]"
					v-for="(item, index) in timeList"
					:key="index"
					:data-time="item"
					@click="selectTime(item.code)"
				>
					{{ item.name }}
				</view>
			</view>
			<view v-if="curData == 'zidingyi'">
				<uni-datetime-picker type="date" :end='endTime' :clear-icon="false" v-model="zdyTime" @change='timeChange' />
			</view>
		</view>
		<!-- 功能投用率主卡片 -->
		<view class="main-card">
		    <view class="main-card-title">{{ titleName.jkFen }}</view>
		    <view class="utilization-grid">
		        <view 
				v-for="(item, index) in pfData"
				:key = 'index'
				class="utilization-item">
		            <view class="utilization-label">{{ item.name }}</view>
		            <view class="utilization-value">{{ item.value }}
					<label class="utilization-unit">%</label>
					</view>
		            
		        </view>
		    </view>
		</view>
		<!-- 图表展示区域 -->
		<view class="chart-section">
		    <view class="chart-header">
		        <view class="chart-title">{{ titleName.jkTend }}</view>
		        <view class="chart-time-selector">
					<uni-datetime-picker v-model="rangTime" :end='endTime' type="daterange" :clear-icon="false" @change='rangpjChange'/>
		        </view>
		    </view>
		    <view class="chart-container">
				<qiun-data-charts
					 :canvas-style="canvasStyle" 
					  :canvas2d="true"
				      type="line"
				      :opts="optsJk"
					  :reshow="isjkShow"
				      :chartData="jkData"
				    />
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import { timestampFormatDate } from '../../../utils/FormatTime.js'
import { post, postForm } from '@/utils/request';
import { overdueStatistics, queryAndStatistics, getHealthScoreDaily, getHealthScoreChart } from '@/api/check.js';
export default {
	name: '',
	data() {
		return {
			titleName: {
				pjFen: '超期未整改数',
				Tend: '超期未整改趋势',
				jkFen: '区域日健康度评分',
				jkTend: '区域健康度评分趋势',
			},
			tabList: [
				{
					name: '区域',
					code: 'area'
				},
				{
					name: '专业条线',
					code: 'subject'
				}
			],
			titleTab: {
				area: {
					pjFen: '超期未整改数',
					Tend: '超期未整改趋势',
					jkFen: '区域日健康度评分',
					jkTend: '区域健康度评分趋势',
				},
				tiaoxian: {
					pjFen: '超期未整改数',
					Tend: '超期未整改趋势',
					jkFen: '专业条线日健康度评分',
					jkTend: '专业条线健康度评分趋势',
				},
				/* shop: {
					pjFen: '车间月平均得分',
					Tend: '车间平均得分对比',
					jkFen: '车间月健康度评分',
					jkTend: '车间健康度评分对比',
				} */
			},
			curTab: 'area',
			jkData: {},
			optsJk: {
			  color: ["#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			  padding: [0, 20, 20, 0],
			  dataLabel: false,
			  dataPointShape: false,
			  enableScroll: false,
			  legend: {
			      position: 'top'
			  },
			  xAxis: {
			    disableGrid: true,
			    marginTop: 5,
			    scrollShow: false,
				padding: [0, 20], // 文字自身的上下左右留白 [!code focus]
				offset: 15,         // 轴线距离图表容器底部的距离 [!code focus]
				fontSize: 12,       // 文字大小（影响整体占位）
			    labelCount: 6, // [!code focus]
				gridEval: 5,
				boundaryGap: 'justify'  // 均匀分布模式
			  },
			  yAxis: {
			    gridType: "dash",
			    dashLength: 2
			  },
			  extra: {
			    line: {
			      type: "curve",
			      width: 2,
			      activeType: "hollow",
			    }
			  }
			},
			yqData: {},
			optsYq: {
			  color: ["#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			  padding: [0, 20, 20, 0],
			  dataLabel: false,
			  dataPointShape: false,
			  enableScroll: false,
			  legend: {
			      position: 'top'
			  },
			  xAxis: {
			    disableGrid: true,
			    marginTop: 5,
			    scrollShow: false,
				padding: [0, 20], // 文字自身的上下左右留白 [!code focus]
				offset: 15,         // 轴线距离图表容器底部的距离 [!code focus]
				fontSize: 12,       // 文字大小（影响整体占位）
			    labelCount: 6, // [!code focus]
				gridEval: 5,
				boundaryGap: 'justify'  // 均匀分布模式
			  },
			  yAxis: {
			    gridType: "dash",
			    dashLength: 2
			  },
			  extra: {
			    line: {
			      type: "curve",
			      width: 2,
			      activeType: "hollow",
			    }
			  }
			},
			endTime: Date.now(),
			zdyTime: Date.now(),
			echartsView: true,
			curTime: Date.now(),
			popupType: 'bottom',
			rangTime: [Date.now() - 7*24*3600*1000, Date.now()],
			showModal: false,
			modalTitle: "",
			detailList: [],
			curData: 'today',
			timeList: [
				{
					code: 'today',
					name: '今日'
				},
				{
					code: 'yesterday',
					name: '前一天'
				},
				{
					code: 'zidingyi',
					name: '自定义'
				}
			],
			timeData: {},
			statisticsList: [],
			pfData: [],
			equipmentData: [],
		};
	},
	
	watch: {
	},
	onLoad(option) {
	},
	onShow() {
		this.curTime = Date.now()
		this.zdyTime = Date.now() - 2*24*3600*1000
		this.curTime = timestampFormatDate(this.curTime, 'yyyy-MM-dd')
		this.zdyTime = timestampFormatDate(this.zdyTime, 'yyyy-MM-dd')
		let start = Date.now() - 7*24*3600*1000
		let end = Date.now()
		this.rangTime = [timestampFormatDate(start, 'yyyy-MM-dd hh:mm:ss'),timestampFormatDate(end, 'yyyy-MM-dd hh:mm:ss')]
		this.endTime = timestampFormatDate(end, 'yyyy-MM-dd hh:mm:ss')
		this.getyuqiData()
		this.getData()
		this.getjkLine()
	},
	methods: {
		onClickLine(item) {
			this.curTab = item.code
			this.getyuqiData()
			this.getData()
			this.getjkLine()
		},
		selectTime(time) {
			let timeData = ''
			if(time != 'zidingyi') {
				if(time == 'today') {
					timeData = Date.now()
					this.curTime = timestampFormatDate(timeData, 'yyyy-MM-dd')
				} else if(time == 'yesterday') {
					timeData = Date.now() - 1*24*3600*1000
					this.curTime = timestampFormatDate(timeData, 'yyyy-MM-dd')
				}
			} else {
					timeData = this.zdyTime
					this.curTime = timeData
				}
			this.curData = time
			this.getData()
		},
		async getyuqiData() {
			uni.showLoading({
				title: '数据加载中！',
				mask: true,
			});
			const dataParams = {
				type: this.curTab
			}
			const res = await overdueStatistics(dataParams);
			uni.hideLoading();
			let resData = res.data
			resData.statisticsList.push({
				name: '车间',
				value: resData.workshopTotal
			})
			this.statisticsList = resData.statisticsList
			this.titleName.pjFen = resData.title
			const res1 = await queryAndStatistics(dataParams);
			let res1Data = res1.data
			this.titleName.Tend = res1Data.title
			let dataLength = res1Data.chartData.categories.length
			if(dataLength > 10) {
				this.optsYq.xAxis.labelCount = 4
			} else if(dataLength == 10) {
				this.optsYq.xAxis.labelCount = 3
			} else {
				this.optsYq.xAxis.labelCount = 6
			}
			this.confirmDateRange(res1Data.chartData)
		},
		async getData() {
			const userInfor = uni.getStorageSync('userInfor');
			uni.showLoading({
				title: '数据加载中！',
				mask: true,
			});
			const dataParams = {
				type: this.curTab,
				queryDate: this.curTime,
				userId: userInfor.userId
			}
			const res = await getHealthScoreDaily(dataParams);
			uni.hideLoading();
			let resData = res.data
			this.titleName.jkFen = resData.title
			this.pfData = resData.statisticsList
			
		},
		async getjkLine() {
			const userInfor = uni.getStorageSync('userInfor');
			uni.showLoading({
				title: '数据加载中！',
				mask: true,
			});
			const dataParams = {
				type: this.curTab,
				startTime: this.rangTime[0],
				endTime: this.rangTime[1],
				userId: userInfor.userId
			}
			const res = await getHealthScoreChart(dataParams);
			uni.hideLoading();
			let res1Data = res.data
			this.titleName.jkTend = res1Data.title
			let dataLength = res1Data.categories.length
			if(dataLength > 10) {
				this.optsJk.xAxis.labelCount = 4
			} else if(dataLength == 10) {
				this.optsJk.xAxis.labelCount = 3
			} else {
				this.optsJk.xAxis.labelCount = 6
			}
			let chartData = {
				categories: res1Data.categories,
				series: res1Data.series
			}
			this.jkLIne(chartData)
			
		},
		rangpjChange() {
			this.getjkLine()
		},
		confirmDateRange(res) {
			this.yqData = JSON.parse(JSON.stringify(res));
			this.isShow = true
			this.isShow = false
		},
		jkLIne(res) {
			this.jkData = JSON.parse(JSON.stringify(res));
			this.isjkShow = true
			this.isjkShow = false
		},
		timeChange() {
			this.curTime = this.zdyTime
			this.getData()
		},
		change() {},
		showEquipmentDetail(data) {
		    const details = data.subItem || [];
		    this.modalTitle = data.name + " 详细异常";
		    this.detailList = details;
			this.$refs.popup.open();
		  },
		  
		  closeModal() {
			this.$refs.popup.close();
		  },
	},
}
</script>

<style scoped lang="scss">
	.container {
		padding: 12px;
	}
	
	.time-selector {
	    background: white;
	    border-radius: 12px;
	    padding: 10px;
		margin-top: 10px;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	    border: 1px solid #f0f0f0;
	}
	.uni-tab-title {
		border-bottom: 1px solid rgba(237, 237, 237, 0.9);
	}
	.line-box {
		display: flex;
		.line-item {
			text-align: center;
			padding: 10px;
			border-radius: 1px;
			background: #fff;
			z-index: 1;
			flex: calc(25% - 8px);
	
			&.active {
				background: #ffffff;
				color: #4055e6;
				border-bottom: 2px solid #4055e6;
			}
		}
	}
	.time-selector-title {
	    font-size: 14px;
	    font-weight: 600;
	    color: #262626;
	    margin-bottom: 10px;
		margin-top: 10px;
	    display: flex;
	    align-items: center;
	}
	
	.time-selector-title::before {
	    content: '📅';
	    margin-right: 8px;
	    font-size: 16px;
	}
	
	.time-tabs {
	    display: flex;
	    background: #f5f5f5;
	    border-radius: 8px;
	    padding: 4px;
	    gap: 4px;
	}
	
	.time-tab {
	    flex: 1;
	    text-align: center;
	    padding: 8px 12px;
	    border-radius: 6px;
	    font-size: 13px;
	    font-weight: 500;
	    color: #8c8c8c;
	    transition: all 0.2s ease;
	    cursor: pointer;
	}
	
	.time-tab:active {
	    transform: scale(0.98);
	}
	
	.time-tab.active {
	    background: #1890ff;
	    color: white;
	    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
	}
	
	/* 功能投用率大卡片 */
	.main-card {
	    background: linear-gradient(135deg, #1890ff, #096dd9);
	    border-radius: 16px;
	    padding: 15px;
	    margin-bottom: 10px;
		margin-top: 10px;
	    color: white;
	    box-shadow: 0 8px 24px rgba(24, 144, 255, 0.15);
	}
	.main-card-title {
	    font-size: 18px;
	    font-weight: 600;
	    margin-bottom: 16px;
	    display: flex;
	    align-items: center;
	}
	
	.main-card-title::before {
	    content: '📊';
	    margin-right: 8px;
	    font-size: 20px;
	}
	
	.utilization-grid {
	    display: grid;
	    grid-template-columns: repeat(2, 1fr);
	    gap: 12px;
	    margin-bottom: 10px;
	}
	
	.utilization-item {
	    background: rgba(255, 255, 255, 0.15);
	    backdrop-filter: blur(10px);
	    border-radius: 12px;
	    padding: 10px 8px;
	    text-align: center;
	    border: 1px solid rgba(255, 255, 255, 0.2);
	}
	
	.utilization-label {
	    font-size: 12px;
	    opacity: 0.9;
	    margin-bottom: 4px;
	}
	
	.utilization-value {
	    font-size: 18px;
	    font-weight: 600;
	    margin-bottom: 2px;
	}
	
	.utilization-unit {
	    font-size: 10px;
	    opacity: 0.8;
	}
	
	.chart-mini {
	    height: 200px;
	    background: rgba(255, 255, 255, 0.1);
	    border-radius: 12px;
	    margin-top: 12px;
	}
	
	/* 图表区域 */
	.chart-section {
	    background: white;
	    border-radius: 12px;
	    padding: 14px;
	    margin-top: 16px;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	    border: 1px solid #f0f0f0;
	}
	
	.chart-header {
	}
	
	.chart-title {
	    font-size: 14px;
	    font-weight: 600;
	    color: #262626;
	    align-items: center;
		margin-bottom: 5px;
	}
	
	.chart-title::before {
	    content: '📈';
	    margin-right: 8px;
	}
	.chart-title-edit {
		font-size: 14px;
		font-weight: 600;
		color: #262626;
		width: 50%;
		display: flex;
		align-items: center;
	}
	.chart-title-edit::before {
	    content: '📈';
	    margin-right: 8px;
	}
	.chart-time-selector {
	    align-items: center;
	    gap: 8px;
	}
	
	.date-range-picker {
	    display: flex;
	    align-items: center;
	    gap: 4px;
	    background: #f5f5f5;
	    border-radius: 6px;
	    padding: 4px 8px;
	    font-size: 14px;
	    color: #666;
	}
	
	.date-input {
	    border: none;
	    background: transparent;
	    font-size: 11px;
	    color: #666;
	    width: 80px;
	    text-align: center;
	    outline: none;
	}
	
	.date-separator {
	    color: #999;
	    margin: 0 2px;
	}
	
	.chart-container {
	    height: 250px;
		margin-bottom: 10px;
	}
	/* 时间筛选器 */
        .time-selector {
            background: white;
            border-radius: 12px;
            padding: 10px;
			margin-top: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            border: 1px solid #f0f0f0;
        }
		.uni-tab-title {
			border-bottom: 1px solid rgba(237, 237, 237, 0.9);
		}
		.line-box {
			display: flex;
			.line-item {
				text-align: center;
				padding: 10px;
				border-radius: 1px;
				background: #fff;
				z-index: 1;
				flex: calc(25% - 8px);
		
				&.active {
					background: #ffffff;
					color: #4055e6;
					border-bottom: 2px solid #4055e6;
				}
			}
		}
        .time-selector-title {
            font-size: 14px;
            font-weight: 600;
            color: #262626;
            margin-bottom: 10px;
			margin-top: 10px;
            display: flex;
            align-items: center;
        }

        .time-selector-title::before {
            content: '📅';
            margin-right: 8px;
            font-size: 16px;
        }

        .time-tabs {
            display: flex;
            background: #f5f5f5;
            border-radius: 8px;
            padding: 4px;
            gap: 4px;
        }

        .time-tab {
            flex: 1;
            text-align: center;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 500;
            color: #8c8c8c;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .time-tab:active {
            transform: scale(0.98);
        }

        .time-tab.active {
            background: #1890ff;
            color: white;
            box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
        }
</style>